<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/mui-icons-extra.css" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="./css/style.css" />
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="top">
					<input type="text" value="wathch4" />
					<div class="mui-icon-extra mui-icon-extra-sweep"></div>
				</div>

				<div class="top_b">
					<div class="active_2">华为</div>
					<div>鸿蒙智行</div>
					<div>华为商城</div>
					<div>生态周边</div>
				</div>

				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!-- 第一张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="./images/lunbo/lunbo01.jpg">
							</a>
						</div>
						<!-- 第二张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="./images/lunbo/lunbo02.jpg">
							</a>
						</div>
						<!-- 第三张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="./images/lunbo/lunbo03.jpg">
							</a>
						</div>
						<!-- 第四张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="../images/lunbo/lunbo04.jpg">
							</a>
						</div>
					
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>


				<div class="main-fenlei">
					<div class="main-fltop">
						<div class="main-fltopp" id="mflt">
							<div>
								<img src="./images/fenleiqu/fl01.png" alt="">
								<span>智慧办公</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl02.png" alt="">
								<span>智能家居</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl03.gif" alt="">
								<span>华为手机</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl04.png" alt="">
								<span>影音娱乐</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl05.png" alt="">
								<span>运动健康</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl06.png" alt="">
								<span>智慧出行</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl07.png" alt="">
								<span>莫塞尔</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl08.png" alt="">
								<span>个护健康</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl09.png" alt="">
								<span>教育商店</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl010.png" alt="">
								<span>鸿蒙智联</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl011.png" alt="">
								<span>众测</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl012.png" alt="">
								<span>AITO汽车</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl013.png" alt="">
								<span>华为智选</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl014.png" alt="">
								<span>直播</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl015.png" alt="">
								<span>企业团购</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl016.png" alt="">
								<span>拼团</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl017.png" alt="">
								<span>领劵中心</span>
							</div>
							<div>
								<img src="./images/fenleiqu/fl018.png" alt="">
								<span>二手机</span>
							</div>
						</div>
					</div>
				</div>

				<div class="main-XsMs">
					<div>
						<div class="main-Xs">
							<div class="main-Xst dasdas">
								<div style="font-size: 15px;">新人有礼 福利专区</div>
								<span class='font' style="font-size: 10px;">用卷专区|用卷专区|用卷专区</span>
							</div>
							<div class="main-Xsimg">
								<div>
									<img src="./images/XsMs/xs01.png" alt="">
									<span class="tops">用券价</span>
									<span>￥579</span>
								</div>
								<div> <img src="./images/XsMs/xs02.png" alt="">
									<span class="tops">用券价</span>
									<span>￥3969</span>
								</div>
							</div>
						</div>
						<div class="main-Ms">
							<div class="main-Xst">
								<div style="text-align: right;font-size: 10px;">领取30元抢券包&gt;</div>
							</div>
							<div class="main-Xsimg">
								<div>
									<img src="./images/XsMs/ms01.png" alt="">
									<span class="tops">用券价</span>
									<span>￥579</span>
								</div>
								<div> <img src="./images/XsMs/ms02.png" alt="">
									<span class="tops">用券价</span>
									<span>￥699</span>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="main-like" style="width: 100%;">
					<div class="main-cailike">精选好物</div>
					<div class="main-live">
					</div>
				</div>
				<!-- 加载 -->


			</div>
		</div>
		
		
		<!-- tab -->
		<nav class="mui-bar mui-bar-tab" style="display: flex;height: 60px;justify-content: space-around;align-items: center;">
			<a href="./home.html" style="text-align: center;vertical-align: middle;">
				<img src="./images/daohang/aba1.jpg" alt="" width="30" />
				<div style="color: #000;font-size: 12px;transform: translateY(-5px);">首页</div>
			</a>
			<a href="./cate.html" style="text-align: center;">
				<img src="./images/daohang/pic2.jpg" alt="" width="30" />
				<div style="color: #000;font-size: 12px;transform: translateY(-5px);">分类</div>
			</a>
			<a href="./find.html" style="text-align: center;">
				<img src="./images/daohang/DHY03.jpg" alt="" width="30" />
				<div style="color: #000;font-size: 12px;transform: translateY(-5px);">发现</div>
			</a>
			<a href="./shop.html" style="text-align: center;">
				<img src="./images/daohang/pic3.jpg" alt="" width="30" />
				<div style="color: #000;font-size: 12px;transform: translateY(-5px);">购物车</div>
			</a>
			<a href="./my.html" style="text-align: center;">
				<img src="./images/daohang/pic4.jpg" alt="" width="30" />
				<div style="color: #000;font-size: 12px;transform: translateY(-5px);">我的</div>
			</a>
		</nav>
		
		<script src="./js/jquery-1.12.4.js"></script>
		<script src="./js/mui.js"></script>
		<script src="./json/data.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.ready(function() {

				// 渲染商品列表
				data.forEach((item, i) => {
					$(".main-live").append(`
						<div class="main-sp" id=${item.id} style="width:50%">
						    <img src="./images/live/live0${i +1}.png" alt="">
						    <div class="main-sps">
						        <div class="main-sps1">
									${item.xps}
						        </div>
						        <div class="main-sps2">${item.sps2}</div>
						    </div>
						    <div class="main-rmb">
						        <div class="main-rmbr">￥</div>
						        <div>${item.price}</div>
						        <div class="main-rr">￥3499</div>
						    </div>
						</div>
					`)
				})
				
				

				mui('.main-live').on('tap', '.main-sp', function() {
					var id = this.id
					mui.openWindow({
						url:"detail.html?myid=" + id,
						id:"detail.html"
					})

				})

			})
		</script>
	</body>

</html>